<template>
  <view class="category">
    <u-search v-model="searchKey" bg-color="#f2f3f7" placeholder="搜索品牌" :show-action="false" margin="20rpx" @search="search" @clear="clear" />

    <u-sticky bg-color="#fff">
      <u-tabs :list="tabList" line-width="30" line-height="4" line-color="#bf9d2c" :active-style="activeStyle" :inactive-style="inactiveStyle" item-style="height: 44px;width: 42%;" @click="switchTab" />
    </u-sticky>

    <!-- 内容区 -->
    <view class="main">
      <!-- 左侧内容 -->
      <view v-if="currentTab == 1" class="first-menu">
        <block v-for="(firstCategory, index) in firstCategoryList" :key="index">
          <view class="item" :class="{active:selectedIndex===index}" :data-index="index" @tap="switchCategory">{{ firstCategory.name }}</view>
        </block>
      </view>
      <!-- 右侧内容 -->
      <view v-if="currentTab == 1" class="subclass">
        <block v-for="(secondCategory, index) in secondCategoryList" :key="index">
          <view class="sub-con">
            <view class="item" @tap="toSearchListPage(secondCategory.tempId)">
              <u-row gutter="10">
                <u-col span="4">
                  <view class="img">
                    <image :src="secondCategory.icon" />
                  </view>
                </u-col>
                <u-col span="8" custom-style="text-align: left">
                  <view class="titleBox">
                    <view class="text title">{{ secondCategory.name }}</view>
                    <view class="detailBox">
                      <view class="text">楼层：{{ secondCategory.floorName }}</view>
                      <view class="text">门牌：{{ secondCategory.addrNumber }}</view>
                    </view>
                  </view>
                </u-col>
              </u-row>
            </view>
          </view>
        </block>
      </view>
      <view v-if="currentTab == 2" class="subclass">
        <block v-for="(secondCategory, index) in secondCategoryAllList" :key="index">
          <view class="sub-con">
            <view class="item" @tap="toSearchListPage(secondCategory.tempId)">
              <u-row gutter="10">
                <u-col span="4">
                  <view class="img">
                    <image :src="secondCategory.icon" />
                  </view>
                </u-col>
                <u-col span="8" custom-style="text-align: left">
                  <view class="titleBox">
                    <view class="text title">{{ secondCategory.name }}</view>
                    <view class="detailBox">
                      <view class="text">楼层：{{ secondCategory.floorName }}</view>
                      <view class="text">门牌：{{ secondCategory.addrNumber }}</view>
                    </view>
                  </view>
                </u-col>
              </u-row>
            </view>
          </view>
        </block>
      </view>
    </view>
  </view>
</template>

<script>
import { brandTreeByName } from '@/api/api1'

export default {
  data() {
    return {
      activeStyle: {
        color: '#bf9d2c',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      },
      inactiveStyle: {
        color: '#aaaaaa',
        transform: 'scale(1)'
      },
      searchKey: undefined,
      tabList: [], // 分类
      currentTab: 1, // 选中的分类项(默认为第一个分类)
      selectedIndex: 0, // 选中的分类项(默认为第一个分类)
      firstCategoryList: [], // 一级分类内容(一级分类下的categories为二级分类)
      secondCategoryList: [], // 二级分类内容
      secondCategoryAllList: [] // 二级分类内容
    }
  },
  computed: {},
  onLoad: function(options) {
    this.getSection()
    this.getPlatformCategoryList()
  },
  onShow: function() {
  },
  methods: {
    clear() {
      this.currentTab = 1
      this.getPlatformCategoryList()
    },
    search(value) {
      if (value === '') {
        this.currentTab = 1
      } else {
        this.currentTab = 2
      }
      this.getPlatformCategoryList()
    },
    /**
     * 获取平台分类
     */
    getSection() {
      this.tabList = [{
        name: '楼层'
      }, {
        name: '品牌'
      }]
      this.tabList.forEach((x, i) => {
        x.id = i + 1
      })
      this.currentTab = 1
    },
    /**
    * 切换分类
    */
    switchTab(e) {
      if (this.currentTab === e.id) return
      this.currentTab = e.id
    },
    getPlatformCategoryList() {
      uni.showLoading()
      brandTreeByName({ name: this.searchKey }).then(res => {
        uni.hideLoading()
        const firstCategoryList = res.data

        this.firstCategoryList = firstCategoryList
        // 默认选择: 第一个一级分类
        if (this.firstCategoryList[0].children) {
          this.secondCategoryList = this.firstCategoryList[0].children
        } else {
          this.secondCategoryList = []
        }

        const secondCategoryAllList = []
        for (let i = 0; i < firstCategoryList.length; i++) {
          const c = firstCategoryList[i]

          let secondCategoryList = []
          if (c.children) {
            secondCategoryList = c.children
          }
          if (i === 0) {
            this.secondCategoryList = secondCategoryList
          }
          secondCategoryList.forEach(data => {
            secondCategoryAllList.push(data)
          })
        }
        this.secondCategoryAllList = secondCategoryAllList
      })
    },

    /**
     * 切换分类，改变二级分类内容
     */
    switchCategory(e) {
      const index = parseInt(e.currentTarget.dataset.index)
      this.selectedIndex = index
      if (this.firstCategoryList[index].children) {
        this.secondCategoryList = this.firstCategoryList[index].children
      } else {
        this.secondCategoryList = []
      }
    },
    toSearchPage() {
      console.log(1)
    },

    /**
     * 跳转到商品列表页
     */
    toSearchListPage(e) {
      console.log(e)
      uni.$u.route('/pages/floorGuide/detail', {
        brandId: e
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.category {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 750rpx;
  margin: auto;

  /* 搜索框 */
  .search-box {
    background: #fff;
    padding: 20rpx;
    position: relative;
    z-index: 1;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
    .search {
      height: 60rpx;
      background: #f2f3f7;
      border-radius: 60rpx;
      display: flex;
      align-items: center;
      .icon {
        width: 24rpx;
        height: 24rpx;
        font-size: 0;
        margin-left: 20rpx;
      }
      .text {
        color: #999;
        margin-left: 10rpx;
      }
    }
  }

  /* 内容区 */
  .main {
    display: flex;
    height: calc(100% - 200rpx - env(safe-area-inset-bottom));
    background: #fff;
    .first-menu {
      width: 180rpx;
      background: #f2f3f7;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      position: relative;
      .item {
        padding: 20rpx 10rpx;
        height: 50rpx;
        line-height: 50rpx;
        text-align: center;
        color: #666;
        position: relative;
      }
      .item.active {
        color: #333;
        font-size: 28rpx;
        font-weight: 600;
        background: #fff;
      }
      .item.active::before {
        position: absolute;
        left: 0;
        top: 50%;
        display: block;
        width: 6rpx;
        height: 28rpx;
        content: ' ';
        font-size: 0;
        background: #fc1b35;
        border-radius: 0 6rpx 6rpx 0;
        transform: translateY(-50%);
      }
    }
    .first-menu::after {
      min-height: calc(100% + 2rpx);
    }
    .subclass {
      flex: 1;
      padding: 0 30rpx 0;
      box-sizing: border-box;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
      position: relative;
      background-color: #f9f3f0;
      .adv-img {
        width: 100%;
        height: 200rpx;
        font-size: 0;
        margin-bottom: 40rpx;
      }
      .sub-con {
        display: flex;
        .item {
          width: 100%;
          margin-top: 20rpx;
          .img {
            width: 150rpx;
            height: 150rpx;
            font-size: 0;
            border-radius: 10rpx;
            overflow: hidden;
            margin: auto;
          }
          .titleBox {
            height: 150rpx;
            @include flex-space-around(column);
            .title {
              font-weight: 600;
              font-size: 32rpx;
            }
            .text {
              width: 100%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin: 0 auto;
              margin-top: 10rpx;
            }
          }
          .detailBox {
            width: 100%;
            flex: 1;
          }
        }
      }
      .sub-con:last-child {
        margin-bottom: 30rpx;
      }
    }
    .subclass::after {
      min-height: calc(100% + 2rpx);
    }
  }
  /* #ifdef MP-WEIXIN*/
  .main {
    height: calc(100% - 30rpx - env(safe-area-inset-bottom));
  }
  /* #endif */
}
</style>
